<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>酒店机票预订</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script src="/js/common.js"></script>

</head>
<body>
<div class="search-head" style="background: #0bc66f">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>
<section class="aui-flexView">
    <section class="aui-scrollView">
        <div class="aui-hotel-content">
            <div class="aui-hotel-content-bg">
                <div class="aui-hotel-head"></div>
                <div class="aui-tab" data-ydui-tab>
                    <ul class="tab-nav">
                        <li class="tab-nav-item tab-active">
                            <a href="javascript:;">酒店预订</a>
                        </li>
                        <li class="tab-nav-item">
                            <a href="javascript:;">机票预订</a>
                        </li>
                    </ul>
                    <div class="tab-panel">
                        <!-- 酒店预订 begin -->
                        <div class="tab-panel-item tab-active">
                            <div class="aui-flex aui-flex-mar b-line">
                                <select class="aui-flex-box" name="place.id">
                                </select>
                                <!--<div id="beijing" class="aui-hotel-city">广州</div>-->
                                <div class="aui-flex-box aui-hotel-text">精品酒店预订 <i class="aui-icon icon-location"></i>
                                </div>
                            </div>

                            <div id="checkinout" class="b-line" style="display: none">
                                <div id="firstSelect" style="width:100%;">
                                    <div class="Date_lr" style="float:left;">
                                        <P>入住</p>
                                        <input id="startDate" type="text" value="" style="" readonly>
                                    </div>
                                    <span class="aui-calendar-days">共<span class="NumDate">1</span>晚</span>
                                    <div class="Date_lr" style="float:right;">
                                        <p>离店</p>
                                        <input id="endDate" type="text" value="" style="" readonly>
                                    </div>

                                </div>
                            </div>

                            <div class="aui-flex aui-flex-mar b-line">
                                <div class="aui-flex-head">试试搜</div>
                                <div class="aui-flex-box">
                                    <input type="text" class="aui-flex-search" placeholder="名称/位置/品牌" name="keyword">
                                </div>
                            </div>

                            <div class="aui-flex aui-flex-mar b-line">
                                <div class="aui-flex-head">价格</div>
                                <div class="aui-flex-box">
                                    <input type="number" class="aui-flex-search" placeholder="最高价" name="maxPrice">
                                </div>
                            </div>

                            <div class="aui-flex-button-box">
                                <button class="aui-flex-button-btn">酒店查询</button>
                            </div>


                        </div>
                        <!-- 酒店预订 end -->

                        <!-- 机票预订 begin -->
                        <div class="tab-panel-item">
                            <div class="aui-city-select b-line">
                                <span class="aui-city-swap"></span>
                                <div class="aui-city-select-item">北京</div>
                                <div class="aui-city-select-item aui-city-fr">上海</div>
                            </div>
                            <div class="aui-city-select b-line aui-city-calendar">
                                <div class="aui-city-select-item">
                                    <p>出发日期</p>
                                    <h2>9月12日 <em>今天</em></h2>
                                </div>
                                <div class="aui-city-select-item aui-city-fr">
                                    <p>返程日期</p>
                                    <h2>添加返程<i class="aui-icon aui-icon-add"></i></h2>
                                </div>
                            </div>
                            <div class="aui-flex aui-flex-mar b-line">
                                <div class="aui-flex-head">头等/商务舱</div>
                                <div class="aui-flex-box">
                                    <label class="cell-item">
                                        <label class="cell-right">
                                            <input type="radio" value="2" name="checkbox" checked="checked">
                                            <i class="cell-checkbox-icon"></i>
                                        </label>
                                        <span class="cell-left">儿童2-11岁</span>
                                    </label>
                                    <label class="cell-item">
                                        <label class="cell-right">
                                            <input type="radio" value="2" name="checkbox">
                                            <i class="cell-checkbox-icon"></i>
                                        </label>
                                        <span class="cell-left">婴儿14天-2岁</span>
                                    </label>
                                </div>
                            </div>
                            <div class="aui-flex-button-box">
                                <button class="aui-flex-button-btn">搜索</button>
                            </div>
                        </div>
                        <!-- 机票预订 end -->
                    </div>
                </div>
            </div>

        </div>

    </section>

</section>

<!-- 入住离店日期弹窗 begin -->
<div class="mask_calendar">
    <div class="calendar"></div>
    <div class="calendar_tishi aui-calendar-tips">请选择离店时间</div>
</div>
<!-- 入住离店日期弹窗 end -->

<script type="text/javascript">
    $(function () {
        //发送ajax请求获取所有区域
        $.get("/regions", function (data) {
            $.each(data, function (index, ele) {
                //每一个迭代出来的对象做成option
                $("<option></option>").html(ele.name).val(ele.id)
                    .appendTo("select[name='place.id']");
            });
            $("select[name='place.id']").val(6);
        });
        $(".aui-flex-button-btn").click(function () {
            var keyword = $("input[name=keyword]").val();
            var maxPrice = $("input[name=maxPrice]").val();
            var placeId =  $("select[name='place.id']").val();
            var url = "/hotel/hotelList.html?placeId="+placeId;
            if (keyword){
                // setKeyword(keyword);
                sessionStorage.setItem("keyword",keyword);
            }else {
                sessionStorage.setItem("keyword","");
            }
            if (maxPrice) {
                url = url + "&maxPrice=" + maxPrice;
            }
            location.href = url;
        });
        $('#firstSelect').on('click', function (e) {
            e.stopPropagation();
            e.preventDefault();
            $('.mask_calendar').show();
        });
        $('.mask_calendar').on('click', function (e) {
            e.stopPropagation();
            e.preventDefault();
            if (e.target.className == "mask_calendar") {
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
            }
        })
        $('#firstSelect').calendarSwitch({
            selectors: {
                sections: ".calendar"
            },
            index: 4,
            //展示的月份个数
            animateFunction: "slideToggle",
            //动画效果
            controlDay: true,
            //知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber: "60",
            //控制天数
            comeColor: "#0bc66f",
            //入住颜色
            outColor: "#0bc66f",
            //离店颜色
            comeoutColor: "#c0f7dd",
            //入住和离店之间的颜色
            callback: function () {
                //回调函数
                $('.mask_calendar').fadeOut(200);
                var startDate = $('#startDate').val();
                //入住的天数
                var endDate = $('#endDate').val();
                //离店的天数
                var NumDate = $('.NumDate').text();
                //共多少晚
                console.log(startDate);
                console.log(endDate);
                console.log(NumDate);
                //下面做ajax请求
            },
            comfireBtn: '.comfire'//确定按钮的class或者id
        });
        var b = new Date();
        var ye = b.getFullYear();
        var mo = b.getMonth() + 1;
        mo = mo < 10 ? "0" + mo : mo;
        var da = b.getDate();
        da = da < 10 ? "0" + da : da;
        $('#startDate').val(ye + '-' + mo + '-' + da);
        b = new Date(b.getTime() + 24 * 3600 * 1000);
        var ye = b.getFullYear();
        var mo = b.getMonth() + 1;
        mo = mo < 10 ? "0" + mo : mo;
        var da = b.getDate();
        da = da < 10 ? "0" + da : da;
        $('#endDate').val(ye + '-' + mo + '-' + da);
    });
</script>

</body>
</html>